{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/article_main.css' %}">
<link rel="stylesheet" href="{% static 'css/article_main_lbt.css' %}">
    <style>
    /* 浮动按钮的基本样式 */
.floating-button {
    position: fixed;  /* 固定定位 */
    right: 50px;     /* 距离右侧20px */
    bottom: 60px;    /* 距离底部20px */
    background: #4CAF50; /* 按钮背景色 */
    color: white;     /* 文字颜色 */
    border: none;     /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    width: 60px;      /* 按钮宽度 */
    height: 60px;     /* 按钮高度 */
    font-size: 40px;  /* 字体大小 */
    cursor: pointer;  /* 鼠标悬停时显示指针手势 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 按钮阴影 */
    z-index: 100;     /* 确保按钮在页面其他内容的上方 */
    text-decoration: none;
}

/* 按钮悬浮效果 */
.floating-button:hover {
    background: #45a049;
}

/* 按钮显示和隐藏的动画效果 */
.floating-button.show {
    animation: showButton 0.5s ease forwards;
}

@keyframes showButton {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
</style>
{% endblock %}
{% block content %}
    <div class="carousel">
        <!-- 轮播图图片 -->
        <div class="carousel-inner" style="display: flex; overflow-x: hidden; scroll-snap-type: x mandatory;">
            <!-- 图片标签，注意添加了scroll-snap-points-x -->
            <img src="{% static '/picture/lbt1.jpg' %}" alt="Image 1" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="url1">
            <img src="{% static '/picture/lbt2.jpg' %}" alt="Image 2" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="url2">
            <img src="{% static '/picture/lbt3.jpg' %}" alt="Image 3" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="url3">
        </div>
        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
            <span class="carousel-indicator active"></span>
            <span class="carousel-indicator"></span>
            <span class="carousel-indicator"></span>
        </div>
        <!-- 轮播图控制按钮 -->
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
    </div>

    <div class="article-categories">
        <h3>文章分类</h3>
        <div class="category-row">
            <ul>
                <li><a href="/article/0/show/">动漫</a></li>
                <li><a href="/article/0/show/">周边</a></li>
                <li><a href="/article/0/show/">轻小说</a></li>
            </ul>
        </div>
        <div class="category-row">
            <ul>
                <li><a href="/article/0/show/">game</a></li>
                <li><a href="/article/0/show/">新闻</a></li>
                <li><a href="/article/0/show/">改编</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="hotsearch-container">
            <h1 class="hotsearch-title">文章推荐</h1>
            <!-- 模拟热搜排名项 -->
            {% for obj in queryset %}
            <div class="hotsearch-item">
                <div class="hotsearch-image-placeholder"><img src="{% static '/picture/lbt1.jpg' %}"></div>
                <div class="hotsearch-details">
                    <a href="/article/{{ obj.id}}/read/" class="hotsearch-biaoti">{{ obj.title }}</a>
                    <div class="hotsearch-meta">
                        <span class="hotsearch-date">发行日期:{{obj.release_time|date:"Y-m-d" }}</span>
                        <span class="hotsearch-views">浏览量: {{ obj.view_count }}</span>
                    </div>
                </div>
                <div class="hotsearch-popularity">
                    <span class="flame-icon">❤评分: {{ obj.likes }}</span>
                </div>
            </div>
            <!-- 其他热搜项可以复制.hotsearch-item并修改内容 -->
            {% endfor %}
        </div>
        <div class="hot-container">
            <h1 class="hot-title">热点文章</h1>
            <!-- 模拟热搜排名项 -->
            {% for obj in hot_queryset %}
            <div class="hot-item">
                <div class="hot-details">
                    <a href="/article/{{ obj.id}}/read/" class="hot-biaoti">{{ obj.title }}</a>
                    <div class="hot-meta">
                        <span class="hot-rank">排名: {{ forloop.counter }}</span>
                        <span class="hot-date">发行日期:{{obj.release_time|date:"Y-m-d" }}</span>
                        <span class="hot-views">浏览量: {{ obj.view_count }}</span>
                    </div>
                </div>
                <div class="hot-popularity">
                    <span class="flame-icon">🔥评分: {{ obj.likes }}</span>
                </div>
            </div>
            <!-- 其他热搜项可以复制.hotsearch-item并修改内容 -->
            {% endfor %}
        </div>


    </div>

    <div class="author-rankings">
        <h2>热门写手排行榜</h2>
        <ol>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">董智豪 - 资深二次元爱好者</a></li>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">孟雅康 - 奇幻文学大师</a></li>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">徐朝晖 - 科幻小说领军人物</a></li>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">陈飞源 - 著名写手</a></li>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">辛稼轩 - 著名写手</a></li>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">吕名川 - 著名写手</a></li>
            <li><a href="/C:\Users\24105\Desktop\ysqd (1)\文章页面\wzym.html">章炎 - 著名写手</a></li>
            <!-- 更多作者排名可以继续添加 -->

        </ol>
    </div>
    <button id="scroll-btn" class="floating-button">+</button>
{% endblock %}
{% block js%}
    <script type="text/javascript" src="{% static '/js/lbt.js' %}"></script>
    <script>// 获取按钮元素
    document.addEventListener('DOMContentLoaded', function() {
        // 获取按钮元素
        var scrollBtn = document.getElementById('scroll-btn');

        // 添加点击事件监听器
        scrollBtn.addEventListener('click', function() {
            // 设置页面跳转的逻辑
            window.location.href = "/article/add/";
        });
    });
 </script>
{% endblock %}
